<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <textarea placeholder="请输入内容"></textarea>
  <button>发送</button>
  <h1>消息列表</h1>
  <div class="list">
    <p>默认的消息</p>
  </div>


  <script>
    const textarea = document.querySelector('textarea');
    const btn = document.querySelector('button');
    const h1 = document.querySelector("h1");
    const list = document.querySelector(".list");

    // 为button元素添加点击事件监听器
    btn.addEventListener('click', () => {
      // 在点击按钮时，获取textarea中的内容，并去除两端空格
      const message = textarea.value.trim();
      // 创建一个新的p元素 <p></p>
      const newP = document.createElement('p');
      // 将获取到的消息内容赋值给新的p元素 <p>message</p>
      newP.innerHTML = message;

      //btn.append(newP);
      //btn.prepend(newP);
      list.append(newP);

     // 为新的p元素添加点击事件监听器
     newP.addEventListener('click', () => {
        // 在点击p元素时，移除该p元素
        newP.remove();
      })
    })

     

  </script>
</body>

</html>